<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none; width: 100%">
      <h1 class="title" style="width: 480px; margin-left: 27%">{{ $t(`Print.RongyangGarmentCoLtdConsumablesDeliveryList`) }}</h1>
      <div style="width: 95%; margin: auto">
        <div style="display: flex; width: 100%; font-size: 13px; justify-content: space-between">
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.OutboundDate`) }}:{{ slipNoList3[0]?.slipDate }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.OutboundReason`) }}:{{ slipNoList3[0]?.slipReason }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.OutboundOrderNumber`) }}:{{ slipNoList3[0]?.slipNo }}</h2>

          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.TabulatedDate`) }}:{{ formatCurrentDateTime(currentDate) }}</h2>
        </div>

        <div style="width: 100%">
          <table style="width: 100%; font-size: 13px">
            <thead>
              <tr>
                <th>{{ $t(`Print.Department`) }}</th>
                <th>{{ $t(`Print.MaterialColorKey`) }}</th>
                <th>{{ $t(`Print.MaterialName`) }}</th>
                <th>{{ $t(`Print.Specification`) }}</th>
                <th>{{ $t(`Print.Unit`) }}</th>
                <th>{{ $t(`Print.Quantity`) }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(iten1, index) in slipNoList3" :key="index">
                <td>{{ iten1.deptName }}</td>

                <td>{{ iten1.mtlColor }}</td>
                <td>{{ iten1.mtlName }}</td>
                <td>{{ iten1.mtlSpec }}</td>
                <td>{{ iten1.mtlUnit }}</td>

                <td>{{ iten1.qty }}</td>
                <!-- 更多的数据单元格 -->
              </tr>
              <!-- 更多的行 -->
            </tbody>
            <!-- 可选的 tfoot 部分 -->
          </table>

          <!-- <Table :tableHeader="tableHeader5" :tableData="slipNoList" /> -->
        </div>

        <div style="display: flex; justify-content: space-between; width: 85%; font-size: 17px; width: 80%; margin: auto">
          <h2 style="font-size: 13px">{{ $t(`Print.Picker_`) }}:</h2>
          <h2 style="font-size: 13px">{{ $t(`Print.WarehouseKeeper`) }}:{{ userInfo?.chiName }}</h2>
        </div>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" @Launchform="Launchform1" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div style="width: 45%">
          <h1>{{ $t(`Print.PendingOutboundDetails`) }}</h1>
          <Table
            :isLoading="isLoading"
            @confirmChange="confirmChange1"
            @currentRow="currentRowList"
            class="table1"
            :tableHeader="tableHeader"
            :tableData="DetailsToBeQueriedMehtodsParms"
            :TableHeight="100"
            :outTableHeight="60"
          />
        </div>
        <div style="width: 55%; margin-left: 10px">
          <h1>{{ $t(`Print.OtherMaterialOutboundDetailMaterials`) }}</h1>
          <Table
            :isLoading="isLoading2"
            @currentRow="currentRowList2"
            :tableHeader="tableHeader1"
            :tableData="QueryDetailsOfOtherMaterialDeliveryMethodsParmsTableDateLsit"
            :TableHeight="100"
            :outTableHeight="60"
          />
        </div>
      </div>
      <PageModule :PageData="{ pageSizeShow: true }" />
    </el-card>
    <!-- 选择材料 -->
    <el-drawer v-model="drawer3" :direction="'ttb'" size="small" :with-header="false">
      <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList2" @Launchform="Launchform2" @findClicked="findData1" />
      <div style="width: 60%; margin-top: 13px">
        <Table
          @currentRow1="currentRowList1"
          :isLoading="isLoading1"
          :tableHeader="tableHeader2"
          :tableData="SelectMaterialQueryMehtodsTableDateList.dtos"
          :TableHeight="70"
          :outTableHeight="70"
        />
        <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChangeTk" @pageChange="handleCurrentChangeTk" />
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ConsumablesOut'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import {
  GainClassification,
  GainDeptNmae,
  SelectMaterialQuery,
  type SelectMaterialQueryInterface
} from '@/api/WarehouseDepartment/FactoryStorage/ConsumablesIn'
import {
  OtherMaterialDeliveryDetailsAreDeleted,
  BatchProcessingOutOfStorage,
  ConsumablesToBeRemoved,
  QueryDetailsOfOtherMaterialDelivery,
  OutBank,
  DetailsToBeQueried,
  DetailsToBeReleasedAdded
} from '@/api/WarehouseDepartment/FactoryStorage/ConsumablesOut'
import type {
  BatchProcessingOutOfStorageParms,
  QueryDetailsOfOtherMaterialDeliveryParms
} from '@/api/WarehouseDepartment/FactoryStorage/ConsumablesOut'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'

// 日期
const formatCurrentDateTime = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const currentDate = ref<any>(new Date())

const formatCurrentDateTime1 = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day}`
}

const isLoading = ref(false)

const isLoading2 = ref(false)

const formList1 = ref([
  {
    type: 'button',
    checkboxLabel: '选择材料'
  },
  {
    type: 'dateSingle',
    dateLabel: '出库日期',
    dateValue: '',
    disabled: true
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部门 ',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库原因',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '出库批处理'
  },
  {
    type: 'button',
    checkboxLabel: '打印'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入出库单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库原因',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部门',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '删除待出库明细'
  },
  {
    type: 'button',
    checkboxLabel: '其他材料出库明细删除'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList2 = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

// 其他材料出库明细删除
const currentRowList2 = (row: any) => {
  const { mtlNo, slipNo } = row
  mtlNoList1.value = mtlNo
  slipNoList1.value = slipNo
  slipNoList3.value = QueryDetailsOfOtherMaterialDeliveryMethodsParmsTableDateLsit.value.filter((item: any) => row.slipNo === item.slipNo)
}

const mtlNoList1 = ref('')

const slipNoList1 = ref('')

const handleCloseMateriaLKlc5 = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除数据吗?')
    .then(async () => {
      OtherMaterialDeliveryDetailsAreDeletedMethods()
    })
    .catch(() => {})
}

const OtherMaterialDeliveryDetailsAreDeletedMethods = async () => {
  const reuslt = await OtherMaterialDeliveryDetailsAreDeleted(mtlNoList1.value, slipNoList1.value)
  if (reuslt.code === 200) {
    mtlNoList1.value = ''
    slipNoList1.value = ''
    QueryDetailsOfOtherMaterialDeliveryMethods()
    JMessage.success(reuslt.message)
  } else {
    mtlNoList1.value = ''
    slipNoList1.value = ''
    QueryDetailsOfOtherMaterialDeliveryMethods()
    JMessage.error(reuslt.message)
  }
}

// 出库批处理
const BatchProcessingOutOfStorageMethodsParms = ref<any>({
  deptName: '',
  deptNo: '',
  sendNo: '',
  slipDate: '',
  slipReason: '',
  sysDate: '',
  vendorName: '',
  vendorNo: ''
})

const BatchProcessingOutOfStorageMethods = async () => {
  const result = await BatchProcessingOutOfStorage(BatchProcessingOutOfStorageMethodsParms.value)
  if (result.code === 200) {
    DetailsToBeQueriedMethods()
    QueryDetailsOfOtherMaterialDeliveryMethods()
    JMessage.success(result.message)
  } else {
    DetailsToBeQueriedMethods()
    QueryDetailsOfOtherMaterialDeliveryMethods()
    JMessage.error(result.message)
  }
}

// 待出库明细删除
const confirmChange1 = async (row: any) => {
  row.remark === null ? (row.remark = '') : row.remark
  row.qty === null ? (row.qty = null) : row.qty
  console.log(row)
  const result = await LoginWork.post<any, any>(`/pcFactorStockQuery/csmOutTempUpdate?mtlNo=${row.mtlNo}&qty=${row.qty}&remark=${row.remark}`)
  if (result.code === 200) {
    DetailsToBeQueriedMethods()
    JMessage.success(result.message)
  } else {
    DetailsToBeQueriedMethods()
    JMessage.error(result.message)
  }
}

const currentRowList = (row: any) => {
  const { mtlNo } = row
  ConsumablesToBeRemovedMehtodsParms.value = mtlNo
}

const ConsumablesToBeRemovedMehtodsParms = ref('')

const ConsumablesToBeRemovedMehtods = async () => {
  const result = await ConsumablesToBeRemoved(ConsumablesToBeRemovedMehtodsParms.value)
  if (result.code === 200) {
    DetailsToBeQueriedMethods()
    ConsumablesToBeRemovedMehtodsParms.value = ''
    JMessage.success(result.message)
  } else {
    DetailsToBeQueriedMethods()
    ConsumablesToBeRemovedMehtodsParms.value = ''
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc3 = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除数据吗?')
    .then(async () => {
      ConsumablesToBeRemovedMehtods()
    })
    .catch(() => {})
}

// 其他材料出库明细查询
const QueryDetailsOfOtherMaterialDeliveryMethodsParms = ref<QueryDetailsOfOtherMaterialDeliveryParms>({
  lotNo: '',
  mtlName: '',
  sendNo: '',
  slipDateEnd: '',
  slipDateStart: '',
  slipNo: '',
  slipReason: '',
  sysDateEnd: '',
  sysDateStart: '',
  vendorNo: ''
})

const QueryDetailsOfOtherMaterialDeliveryMethodsParmsTableDateLsit = ref<any>([])

const QueryDetailsOfOtherMaterialDeliveryMethods = async () => {
  isLoading2.value = true
  const result = await QueryDetailsOfOtherMaterialDelivery(QueryDetailsOfOtherMaterialDeliveryMethodsParms.value)
  QueryDetailsOfOtherMaterialDeliveryMethodsParmsTableDateLsit.value = result
  isLoading2.value = false
}

const Launchform1 = (row: any) => {
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.slipNo = row[6].inputValue
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.lotNo = row[7].inputValue
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.slipReason = row[8].selectValue
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.mtlName = row[9].inputValue
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.vendorNo = row[10].selectValue.split(' ')[0]
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.slipDateEnd = row[11].dateValue[1]
  QueryDetailsOfOtherMaterialDeliveryMethodsParms.value.slipDateStart = row[11].dateValue[0]
  QueryDetailsOfOtherMaterialDeliveryMethods()

  BatchProcessingOutOfStorageMethodsParms.value.slipDate = formatCurrentDateTime1(currentDate.value)
  BatchProcessingOutOfStorageMethodsParms.value.deptName = row[2].selectValue.split(' ')[1]
  BatchProcessingOutOfStorageMethodsParms.value.deptNo = row[2].selectValue.split(' ')[0]
  BatchProcessingOutOfStorageMethodsParms.value.slipReason = row[3].selectValue
}

const printQRCode = () => {
  const qrCodeContainer = document.querySelector<any>('.qrCodeContainer')
  if (qrCodeContainer) {
    // 临时显示 .qrCodeContainer 以获取其内容
    qrCodeContainer.style.display = 'block'

    const printWindow = window.open('', '_blank')
    printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印指令领料作业</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
               

            table, th, td {
                    border: 1px solid black; 
                    border-collapse: collapse; 
                    text-align: center;
                  }
                  th, td {
                    padding: 5px; /* 设置内边距 */
                    text-align: left; /* 设置文本对齐方式 */
                    text-align: center;
                    font-size:11px
                  }
                  .double-line {
                    border-top: 2px dashed red; 
                    border-bottom: 2px dashed red; 
                    text-align: center;
                  }
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

    // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
    const cloneContainer = qrCodeContainer.cloneNode(true)
    printWindow!.document.body.appendChild(cloneContainer)

    printWindow!.document.write(`
        </body>
      </html>
    `)
    printWindow!.document.close()

    // 开始打印
    printWindow!.print()

    // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
    qrCodeContainer.style.display = 'none'
  }
}

const findData = (count: string) => {
  if (count === '选择材料') {
    GainClassificationMehtods()
    SelectMaterialQueryMehtods()
    drawer3.value = true
  }
  if (count === '置空') {
    clearFormList1()
  }
  if (count === '删除待出库明细') {
    if (ConsumablesToBeRemovedMehtodsParms.value === '') {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc3()
    }
  }
  if (count === '出库批处理') {
    if (
      BatchProcessingOutOfStorageMethodsParms.value.deptName === '' ||
      BatchProcessingOutOfStorageMethodsParms.value.slipReason === '' ||
      BatchProcessingOutOfStorageMethodsParms.value.slipDate === ''
    ) {
      JMessage.warning('输入数据不完善')
    } else {
      BatchProcessingOutOfStorageMethods()
    }
  }
  if (count === '其他材料出库明细删除') {
    if (mtlNoList1.value === '' || slipNoList1.value === '') {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc5()
    }
  }

  if (count === '打印') {
    if (slipNoList3.value.length === 0) {
      JMessage.warning('请点击需要打印的数据')
    } else if (slipNoList3.value[0].slipNo === null) {
      JMessage.warning('请选择有出库单号的进行打印')
    } else {
      printQRCode()
    }
  }
}

const slipNoList3 = ref<any>([])

const clearFormList1 = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
  })
}

// 原因
const OutBankMehotds = async () => {
  const result = await OutBank()
  formList1.value[3].selectOptions = EvaluatesTheArrayReturnValue(result)
  formList1.value[8].selectOptions = EvaluatesTheArrayReturnValue(result)
}

// 部门
const GainDeptNmaeMethods = async () => {
  let NewArray = []
  const result = await GainDeptNmae()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptName && item.deptNo) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptNo + ' ' + item.deptName)
    }
    return arr
  }, [])
  formList1.value[2].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
  formList1.value[10].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 待出明细查询
const DetailsToBeQueriedMehtodsParms = ref([])

const DetailsToBeQueriedMethods = async () => {
  isLoading.value = true
  const result = await DetailsToBeQueried()
  DetailsToBeQueriedMehtodsParms.value = result.map((item: any) => {
    item.change = 'Y'
    return item
  })
  isLoading.value = false
}

// 待出明细新增
const currentRowList1 = (row: any) => {
  const { mtlNo } = row
  DetailsToBeReleasedAddedMethodsParms.value = mtlNo
  DetailsToBeReleasedAddedMethods()
}

const DetailsToBeReleasedAddedMethodsParms = ref('')

const DetailsToBeReleasedAddedMethods = async () => {
  const result = await DetailsToBeReleasedAdded(DetailsToBeReleasedAddedMethodsParms.value)
  if (result.code === 200) {
    DetailsToBeQueriedMethods()
    JMessage.success(result.message)
  } else {
    DetailsToBeQueriedMethods()
    JMessage.error(result.message)
  }
}

// 获取分类
const clearFormList = () => {
  formList2.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}

const findData1 = (row: any) => {
  if (row === '置空') {
    clearFormList()
  }
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const GainClassificationMehtods = async () => {
  let NewArray = []
  const result = await GainClassification()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.typeNo && item.typeName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  formList2.value[0].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 选择材料
const Launchform2 = (row: any) => {
  SelectMaterialQueryMehtodsParmsList.value.mtlName = row[1].inputValue
  SelectMaterialQueryMehtodsParmsList.value.type = row[0].selectValue.split(' ')[0]
  SelectMaterialQueryMehtods()
}

const SelectMaterialQueryMehtodsTableDateList = ref<SelectMaterialQueryInterface>({
  dtos: []
})

const SelectMaterialQueryMehtodsParms = ref({
  pageNum: 1,
  pageSize: 40
})

const SelectMaterialQueryMehtodsParmsList = ref({
  mtlName: '',
  type: ''
})

const SelectMaterialQueryMehtods = async () => {
  isLoading1.value = true
  const result = await SelectMaterialQuery(
    SelectMaterialQueryMehtodsParmsList.value.mtlName,
    SelectMaterialQueryMehtodsParmsList.value.type,
    SelectMaterialQueryMehtodsParms.value
  )
  SelectMaterialQueryMehtodsTableDateList.value.dtos = result.dtos
  total.value = result.total!
  isLoading1.value = false
}

const drawer3 = ref(false)

const isLoading1 = ref(false)

const total = ref(0)

const handleSizeChangeTk = (val: number) => {
  SelectMaterialQueryMehtodsParms.value.pageSize = val
  SelectMaterialQueryMehtods()
}

const handleCurrentChangeTk = (val: number) => {
  SelectMaterialQueryMehtodsParms.value.pageNum = val
  SelectMaterialQueryMehtods()
}

// 用户信息
const userInfo = ref()

onMounted(() => {
  DetailsToBeQueriedMethods()

  GainDeptNmaeMethods()

  OutBankMehotds()

  QueryDetailsOfOtherMaterialDeliveryMethods()

  let userInf = sessionStorage.getItem('userInfo')

  userInfo.value = JSON.parse(userInf!)
})

// 表格数据
const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    cahnge: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '库存量',
    prop: 'stkQty',
    change: true
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  }
])

const tableHeader1 = ref([
  {
    label: '出库单号',
    prop: 'slipNo'
  },
  {
    label: '出库日期',
    prop: 'slipDate'
  },
  {
    label: '出库原因',
    prop: 'slipReason'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '物料编号',
    prop: 'mtlNo'
  },
  {
    label: '仓管员',
    prop: 'sysUser'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '分类名称',
    prop: 'typeName'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.table1 {
  :deep(th:nth-child(7)) {
    color: #0000ff !important;
  }

  :deep(th:nth-child(8)) {
    color: #0000ff !important;
  }
}
</style>
